.page {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.contentWrapper {
  background-color: var(--euiColorEmptyShade);
  border-bottom-width: 0;
}

:global(.show-cli) .contentWrapper {
  border-bottom-width: 1px;
}

.content {
  min-height: 100%;
  height: 1px !important;
  width: 100%;
  position: relative;
  padding: 24px 18px 96px 18px;
  scroll-padding-bottom: 80px;

  @media screen and (max-width: 767px) {
    scroll-padding-bottom: 96px;
  }
}

.scrollContainer {
  scroll-padding-bottom: 60px;

  // move scrollbar outside
  margin: 0 -16px;
  padding: 0 16px;
}

.contentFields {
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
}

.helpText {
  color: var(--euiTextSubduedColor);
  display: block;
  margin-bottom: 12px;
  font: normal normal normal 14px/24px Graphik, sans-serif;
}

.closeKeyTooltip {
  position: absolute;
  top: 22px;
  right: 18px;

  svg {
    width: 20px;
    height: 20px;
  }
}

.backBtn:global(.euiButton.euiButton--fill.euiButton--secondary) {
  background-color: var(--browserComponentActive) !important;
  border-color: var(--browserComponentActive) !important;
  color: var(--buttonSecondaryTextColor) !important;

  position: absolute;
  top: 22px;
  right: 18px;

  &:hover, &:focus {
    color: var(--buttonSecondaryTextColor) !important;
  }
}
